/*
 * @Author: jykl jykl@163.com
 * @Date: 2024-12-31 08:19:53
 * @LastEditors: jykl jykl@163.com
 * @LastEditTime: 2024-12-31 08:19:58
 * @FilePath: /react-management/src/views/InfiniteScroll/InfiniteScroll.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect, useRef } from 'react'

// 模拟数据获取函数
const fetchMoreData = async (page) => {
  // 模拟 API 请求
  return new Promise((resolve) => {
    setTimeout(() => {
      const newData = Array.from(
        { length: 20 },
        (_, i) => `Item ${page * 20 + i + 1}`
      )
      resolve(newData)
    }, 1000)
  })
}

const InfiniteScroll = () => {
  const [data, setData] = useState([]) // 存储数据
  const [loading, setLoading] = useState(false) // 加载状态
  const [page, setPage] = useState(1) // 当前页面
  const loader = useRef(null) // 用于判断是否触及底部

  // 数据加载函数
  const loadMoreData = async () => {
    if (loading) return // 如果正在加载中，阻止重复加载

    setLoading(true)
    const newData = await fetchMoreData(page)
    setData((prevData) => [...prevData, ...newData]) // 追加数据
    setPage(page + 1) // 更新页面
    setLoading(false) // 设置加载状态为false
  }

  // 使用 IntersectionObserver 监听加载触发
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          loadMoreData()
        }
      },
      {
        rootMargin: '100px', // 提前加载的距离
      }
    )

    if (loader.current) {
      observer.observe(loader.current) // 观察 loader 元素
    }

    return () => {
      if (loader.current) {
        observer.unobserve(loader.current) // 清理观察
      }
    }
  }, [loading, page]) // 依赖于 loading 和 page

  return (
    <div style={{ padding: '20px' }}>
      <h1>下拉加载更多示例</h1>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      {loading && <div>加载中...</div>}
      <div
        ref={loader}
        style={{ height: '20px', backgroundColor: 'transparent' }}
      />
    </div>
  )
}

export default InfiniteScroll
